<template>
    <div>
        <nav class="BreadcrumbBlock">
			<div class="flex">
				<div class="BreadItem" @click="$router.push('/auth')">IP授权</div>
				<div class="BreadItem active">IP授权管理中心</div>
			</div>
		</nav>
        <div class="contentBox">
            <ul class="AuditType flex align-center">
                <li :class="{'active':auth_status==''}" @click="auth_status='';getData();">全部</li>
                <li :class="{'active':auth_status==8}" @click="auth_status=8;getData();">审核通过</li>
                <li :class="{'active':auth_status==1}" @click="auth_status=1;getData();">等待设计审核</li>
                <!-- <li :class="{'active':auth_status==2}" @click="auth_status=2;getData();">设计审核未通过</li> -->
                <li :class="{'active':auth_status==3}" @click="auth_status=3;getData();">等待授权审核</li>
                <li :class="{'active':auth_status==4}" @click="auth_status=4;getData();">授权审核未通过</li>
                <li :class="{'active':auth_status==6}" @click="auth_status=6;getData();">等待设计稿审核</li>
                <li :class="{'active':auth_status==7}" @click="auth_status=7;getData();">设计稿审核未通过</li>
            </ul>
          <div class="list-tableBox">
            <header class="list-header flex align-center">
                <div class="list-row-item list-num">序号</div>
                <div class="list-row-item list-wxname">企业微信名</div>
                <div class="list-row-item list-dept">所属部门</div>
                <div class="list-row-item list-project">项目名称</div>
                <div class="list-row-item list-useRange">使用范围</div>
                <div class="list-row-item list-desc">用途描述</div>
                <div class="list-row-item list-time">申请时间</div>
                <div class="list-row-item list-status">状态</div>
                <div class="list-row-item list-handle">原因</div>
            </header>
            <main class="list-main">
              <section class="list-row flex align-center" v-for="(item,index) in authList" :key="item.id">
                <div class="list-row-item list-num">{{index+1}}</div>
                <div class="list-row-item list-wxname">{{item.wx_name}}</div>
                <div class="list-row-item list-dept">{{item.dept_name|| '测试部门'}}</div>
                <div class="list-row-item list-project">{{item.project_name}}</div>
                <div class="list-row-item list-useRange">{{item.range_status== '1' ? '线上使用':'线下使用'}}</div>
                <div class="list-row-item list-desc">{{item.description}}</div>
                <div class="list-row-item list-time">{{item.create_time}}</div>
                <div class="list-row-item list-status">
                    <span class="text_warning" v-if="item.status==1||item.status==3||item.status==5||item.status==6" type="warning" :underline="false">{{formStatus(item.status)}}</span>
                    <span class="text_danger" v-if="item.status==2||item.status==4||item.status==7" type="danger" :underline="false">{{formStatus(item.status)}}</span>
                    <span class="text_primary" v-if="item.status==8" type="primary" :underline="false">{{formStatus(item.status)}}</span>
                </div>
                <div class="list-row-item list-handle handle">
                  <div v-if="item.status==2 || item.status==4">
                      <span class="refuseKey">拒绝原因：</span>
                      <br/>{{item.cause}}
                      
                  </div>
                  <div v-if="item.status==7">
                      <span class="refuseKey">拒绝原因：</span>
                      <br/>{{item.cause}}<br/>
                      <button  class="custom_primary_btn" @click='obj=item;dialogDesignCheck=true;'>查看</button>
                  </div>
                  <div v-if="item.status==1 || item.status==3">
                      <button  class="custom_primary_btn" @click="adopt(item)">通过</button>
                      <button class="custom_info_btn"  @click="refuse(item)">拒绝</button>
                  </div>
                  <div v-if="item.status==6">
                      <button  class="custom_primary_btn" @click='checkImg(item)'>查看</button>
                  </div>
                  <div v-if="item.status==8">/</div>
                </div>
              </section>
            </main>
          </div>
        </div>

        <el-dialog title="拒绝原因"  width="680px" :show-close='false' :visible.sync="dialogTableVisible">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">拒绝原因</div>
            </div>
            <section>
                <textarea name="" id="re_cause_desc" v-model="obj.cause"></textarea>
            </section>
            <div slot="footer" class="dialog-footer">
                <button  class="custom_primary_btn"  @click="changeStatus();dialogTableVisible = false">提交</button>
                <button  class="custom_info_btn"  @click="dialogTableVisible = false">取消</button>
            </div>
        </el-dialog>

        <el-dialog title="查看设计稿" width="680px" height='618px' :show-close='false' :visible.sync="dialogDesignVisible">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">查看设计稿</div>
              <i class="el-icon-close pointer" @click="dialogDesignVisible=false"></i>
            </div>
            
            <section class="designImgBox flex justify-center">
                <img :src="obj.design_img" alt="" :style="{transform:'scale('+multiples+')'}" @mousewheel="imgWheel($event)">
            </section>
            <div slot="footer" class="dialog-footer">
                <button class="custom_primary_btn"  @click="obj.status=8;changeStatus();dialogDesignVisible = false">通过</button>
                <button class="custom_info_btn"  @click="obj.status=7;dialogDesignVisible = false;dialogTableVisible=true;">拒绝</button>
            </div>
        </el-dialog>

        <el-dialog title="查看设计稿" width="680px" :visible.sync="dialogDesignCheck">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">查看设计稿</div>
              <i class="el-icon-close pointer" @click="dialogDesignCheck=false"></i>
            </div>
            <section class="designImgBox flex justify-center">
                <img :src="obj.design_img" alt="">
            </section>
        </el-dialog>

      <div class="toastBox" v-show="toastFlag">{{toastMsg}}</div>
    </div>
</template>
<script>
import {formatData} from '@/utils/index.js'
export default {
    name:'authMan',
    data(){
        return{
            authList:[],
            dialogTableVisible:false,
            dialogDesignVisible:false,
            dialogDesignCheck:false,
            auth_status:'',
            obj:{
              id:'',
              status:'',
              cause:'',
              design_img:'',
              email:''
            },
            multiples:1
        }
    },
    mounted(){
      this.getData()
    },
    methods:{
        getData(){
            let that = this;
            that.authList = [];
            let status = that.auth_status;
            this.$axios.get('/api/ipAuth/list',{
              params:{
                status:status
              }
            }).then((res)=>{
              if(res.data.data && res.data.data.length>0){
                res.data.data.forEach(item=>{
                  item.create_time = formatData(item.create_time)
                })
                that.authList = res.data.data
              }
            })
        },
        formStatus(key){
          switch (key) {
            case 1:
              return '等待设计审核'
            case 2:
              return '设计审核未通过'
            case 3:
              return '等待授权审核'
            case 4:
              return '授权审核未通过'
            case 5:
              return '等待上传设计稿'
            case 6:
              return '等待设计稿审核'
            case 7:
              return '设计稿审核未通过'
            case 8:
              return '设计稿审核已通过'
            default:
              return "未知"
          }
        },
        adopt(item){
          this.obj = item;
          this.obj.id = item.id;
          this.obj.reason = '';
          this.obj.email = item.email;
          this.obj.standard_id = item.standard_id;
          if(item.status == 1) this.obj.status = 3;
          if(item.status == 3) this.obj.status = 5;
          this.changeStatus()
        },
        refuse(item){
          this.dialogTableVisible = true;
          this.obj = item;
          this.obj.id = item.id;
          this.obj.email = item.email;
          this.obj.standard_id = item.standard_id;
          if(item.status == 1) this.obj.status = 2;
          if(item.status == 3) this.obj.status = 4;
        },
        checkImg(item){ //查看设计稿
          this.obj = item;
          this.obj.design_img = item.design_img;
          this.obj.id = item.id;
          this.dialogDesignVisible = true;
        },
        changeStatus(){
          let that = this;
          this.$axios.post('/api/ipAuth/examine',that.obj).then(res => {
              that.getData();
              if(that.obj.status==5){
                that.$axios.post('/api/standard/update_status',{
                  standard_id:that.obj.standard_id,
                  status:3
                })
              }

              that.toastFlag = true
              that.toastMsg = res.data.message;
              setTimeout(function(){
                that.toastFlag = false;
              },1000)
              
              
          })
        },
        imgWheel(e){
          if(e.wheelDelta>0){
            this.toBIgChange()
          }else{
            this.toSmallChange()
          }
        },
        toBIgChange() {
          if (this.multiples >= 3) {
            return;
          }
          this.multiples += 0.25;
        },
        // 缩小
        toSmallChange() {
          if (this.multiples <= 0.5) {
            return;
          }
          this.multiples -= 0.25;
        },
    }
}
</script>
<style scoped lang='less'>
  /deep/ .el-dialog{
      padding: 28px !important;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin: 0 auto 50px !important;
  }
  /deep/ .el-dialog__header{
    display: none !important;
  }
  /deep/ .el-dialog__body{
    padding: 0 !important;
  }
  .dialog_title{
    font-size: 20px;
    color: #000000;
    letter-spacing: 0;
    line-height: 16px;
    opacity: 0.95;
    font-weight: 500;
    margin-bottom: 20px;
    i{
      color: #E3E3E3;
    }
  }
  /deep/ .el-dialog__footer{
    padding: 0;
    margin-top: 20px;
    button{
      margin-left: 10px;
    }
  }
  // /deep/ .dialog-footer{
  //   margin-top: 20px;
  // }

  #re_cause_desc{
    width: 624px;
    height: 216px;
    border: 1px solid #E3E3E3;
    font-size: 14px;
    padding: 16px;
    box-sizing: border-box;
    outline: none;
    line-height: 22px;
  }


    .contentBox{
        padding: 0 !important;
        background: #FFFFFF;
        box-shadow: 0 -5px 20px 0 rgba(0,0,0,0.05);
        // min-height: 74vh;
        height: 1317px;
        min-width: 1560px;
    }
    .AuditType{
        height: 74px;
        background: #95A5B6;
        color: #fff;
        font-size: 20px;
        padding: 0 30px;
        flex-wrap: wrap;
        li{
            margin-right: 80px;
            line-height: 30px;
            cursor: pointer;
            color: rgba(255,255,2550,0.5);
        }
        li.active{
            border-bottom: 2px solid #fff;
            color: rgba(255,255,2550,1);
        }
    }
    .list-tableBox{
      width: 100%;
      height: calc(100% - 74px);
      .list-header{
        height: 60px;
        padding: 0 20px 0 20px;
        background: #F4F5F8;
        font-size: 17px;
        color: #000000;
      }
      .list-main{
        height: calc(100% - 60px);
        overflow-y: auto;
        padding: 0 20px;
        .list-row{
          padding: 10px 0;
          min-height: 60px;
          border-bottom: 1px solid #E3E3E3;
          font-size: 16px;
          &:nth-last-child(1){
            border-bottom: none;
          }
          .text_warning{
            color: #F38F00;
          }
          .text_danger{
            color: #FF3232;
          }
          .text_primary{
            color: #0064FF;
          }
        }
        
      }
      .list-main::-webkit-scrollbar { 
          width: 10px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
          background: #fff;
      }
      /*定义滚动条轨道（凹槽）样式*/ 
      .list-main::-webkit-scrollbar-track { 
          // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
          border-radius: 5px; 
      } 
        /*定义滑块 样式*/ 
      .list-main::-webkit-scrollbar-thumb { 
        border-radius: 5px; 
        height: 100px;    /* 滚动条滑块长度 */
        background-color: #95A5B6;
      }
      .list-row-item{
        padding-right: 10px;
        line-height: 28px;
        box-sizing: border-box;
      }
       .list-num{
        min-width: 92px;
        width: 8%;
      }
      .list-wxname{
        min-width: 235px;
        width: 15%;
      }
      .list-dept{
        min-width: 236px;
        width: 15%;
      }
      .list-project{
        min-width: 209px;
        width: 13%;
      }
      .list-useRange{
        min-width: 136px;
        width: 10%;
      }
      .list-desc{
        min-width: 315px;
        width: 14%;
      }
      .list-time{
        min-width: 155px;
        width: 11%;
      }
      .list-status{
        min-width: 184px;
        width: 16%;
      }
      .list-handle{
        min-width: 178px;
        width: 16%;
      }
      .handle{
        padding-right: 0;
        button{
          min-width: 83px;
          margin-left: 0;
        }
      }
    }
    .refuseKey{
      color:#000;
      opacity: 0.5;
      font-size: 16px;
      line-height: 28px;
    }
    .designImgBox{
      width: 524px;
      min-height: 400px;
      margin: 0 auto;
      overflow: hidden;
      img{
        max-width: 100%;
        max-height: 100%;
      }
    }

    
    button{
      width: 83px;
    }
</style>